<template>
	<view class="discount bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">
		<view class="fixed top-0 left-0 w-full z-10 text-[0]">
			<!-- #ifdef MP-WEIXIN -->
			<view class="absolute top-0 left-0 right-0 z-999">
				<top-tabbar :data="param" class="top-header" />
			</view>
			<!-- #endif -->
			<u-swiper v-if="bannerList.length" :list="imgList" :indicator="bannerList.length"
				:indicatorStyle="{ 'bottom': '60rpx', }" :autoplay="true" :height="headStyle" @click="toRedirect"></u-swiper>
			<image v-if="!bannerListLoading && !bannerList.length"
				:src="img('https://files.meton.vip/97b3540a1509cb875ca1ef416842063dcd6998a082787359b1df1d3910f2ed94.png')"
				mode="scaleToFill" class="w-full" :style="{ height: headStyle }" :show-menu-by-longpress="true" />
			<view class="relative w-full h-[110rpx] mt-[-40rpx] z-5" v-if="discountList.length">
				<view
					class="bg-[#f24f3d] w-[750rpx] rounded-tl-[24rpx] rounded-tr-[24rpx] h-[96rpx] absolute left-0 bottom-[1rpx]">
				</view>
				<scroll-view :scroll-x="true" class="h-[110rpx] absolute left-0 bottom-0 z-5">
					<view class="flex items-end h-[100%]" :style="{ 'width': 187.5 * discountList.length + 'rpx' }">
						<view class="w-[187.5rpx] h-[100rpx] relative flex-shrink-0" v-for="(item, index) in discountList"
							@click="navClick(item)">
							<view class="w-full absolute left-0 top-0 z-10 text-[#fff] text-center pt-[14rpx]">
								<view class="text-[28rpx] leading-[39rpx] font-500 px-[10rpx] h-[39rpx] overflow-hidden"
									:class="{ '!text-[#333]': active == item.active_id }">{{ item.active_desc }}</view>
								<view class="flex justify-center w-full">
									<text class="text-[22rpx] h-[36rpx] flex-center mt-[5rpx]"
										:class="{ 'active flex items-center justify-center': active == item.active_id }">{{
											item.active_status == 'not_active' ? '预告' : item.active_status_name }}</text>
								</view>
							</view>
							<template v-if="active == item.active_id">
								<image v-if="discountList.length < 4" class="absolute bottom-0 z-5 h-[110rpx] z-5"
									:class="{ 'left-0 w-[230rpx]': index == 0, 'left-[-41.25rpx] w-[270rpx]': index != 0 }"
									:src="img(index == 0 ? 'addon/shop/discount/nav-left.png' : 'addon/shop/discount/nav-center.png')" />
								<image v-if="discountList.length >= 4" class="absolute bottom-0 z-5 h-[110rpx] z-5"
									:class="{ 'left-0 w-[230rpx]': index == 0, 'left-[-41.25rpx] w-[270rpx]': index != 0 && index != discountList.length - 1, 'right-0 w-[230rpx]': index == discountList.length - 1 }"
									:src="img(index == 0 ? 'addon/shop/discount/nav-left.png' : index == discountList.length - 1 ? 'addon/shop/discount/nav-right.png' : 'addon/shop/discount/nav-center.png')" />
							</template>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>

		<mescroll-body v-if="discountList.length" ref="mescrollRef" :top="mescrollTop" @init="mescrollInit"
			:down="{ use: false }" @up="getActiveCombinationActivityGoodsListFn">
			<view class="sidebar-margin py-[var(--top-m)] bg-[#F4F6F8]">
				<block v-for="(item, index) in list" :key="index">
					<view v-if="item.type == 0" class="bg-[#fff] p-[20rpx] flex rounded-[var(--rounded-big)] "
						:class="{ 'mb-[var(--top-m)]': index < list.length - 1 }" @click="toLink(item)">
						<view class="w-[240rpx] h-[240rpx] rounded-[var(--goods-rounded-big)] overflow-hidden">
							<u--image width="240rpx" height="240rpx" :radius="'var(--goods-rounded-big)'"
								:src="img(item.picUrl ? item.picUrl : '')" model="aspectFill">
								<template #error>
									<image class="rounded-[var(--goods-rounded-big)] overflow-hidden w-[240rpx] h-[240rpx]"
										:src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
								</template>
							</u--image>
						</view>

						<view class="ml-[20rpx] flex-1 flex flex-col justify-between">
							<view class="text-[28rpx] leading-[1.4] multi-hidden">
								{{ item.name }}
							</view>

							<!-- <view v-if="item.goods_label_name && item.goods_label_name.length" class="flex flex-wrap mb-[auto]">
								<template v-for="(tagItem, tagIndex) in item.goods_label_name">
									<image class="img-tag" v-if="tagItem.style_type == 'icon' && tagItem.icon" :src="img(tagItem.icon)"
										mode="heightFix" @error="diyGoods.error(tagItem, 'icon')"></image>
									<view class="base-tag" v-else-if="tagItem.style_type == 'diy' || !tagItem.icon"
										:style="diyGoods.baseTagStyle(tagItem)">
										{{ tagItem.label_name }}
									</view>
								</template>
							</view> -->

							<view class="relative overflow-hidden w-full h-[88rpx] flex justify-between mt-[20rpx] rounded-[100rpx]"
								:class="{ 'bg-[var(--primary-color-light)]': item.active_goods_status == 'active', 'bg-[#FFF6F1]': item.active_goods_status != 'active' }">
								<view class="mr-[20rpx] pl-[30rpx] flex-1 flex flex-col justify-center">
									<view class="flex items-end">
										<view class="text-[var(--price-text-color)] flex items-baseline"
											:class="{ '!text-[#FF8540]': item.active_goods_status != 'active' }">
											<text class="text-[26rpx] leading-[26rpx] font-500 mr-[4rpx] price-font">￥</text>
											<text class="text-[44rpx] leading-[40rpx] font-500 price-font">{{
												parseFloat(fen2yuan(item.combinationPrice)).toFixed(2).split('.')[0] }}.</text>
											<text class="text-[26rpx] leading-[28rpx] font-500 price-font">{{
												parseFloat(fen2yuan(item.combinationPrice)).toFixed(2).split('.')[1] }}</text>
										</view>
										<view class=" mb-[4rpx] text-[var(--price-text-color)] px-[4rpx] border-[1rpx] border-[var(--primary-color)]
											border-solid text-[18rpx] ml-[4rpx] rounded-[4rpx] leading-[24rpx]"
											:class="{ '!border-[#FF8540]': item.active_goods_status != 'active' }">
											{{ item.userSize }}人团</view>
									</view>
									<view class="flex items-center mt-[4rpx]">
										<view
											class="w-[20rpx] h-[20rpx] mr-[4rpx] rounded-[20rpx] text-[#fff] bg-[var(--primary-color)] flex items-center justify-center"
											:class="{ '!bg-[#FF8540]': item.active_goods_status != 'active' }">
											<text class="text-[10rpx] nc-icon-biaoqianV6mm1 nc-iconfont"></text>
										</view>
										<view class="text-[18rpx] font-400 text-[var(--price-text-color)] leading-[24rpx]"
											:class="{ '!text-[#FF8540]': item.active_goods_status != 'active' }">
											已省{{ fen2yuan(Number(item.marketPrice) - Number(item.combinationPrice)) }}元</view>
									</view>
								</view>
								<view class="discount-btn text-[#ff763b] iconfont iconUnion"
									v-if="item.active_goods_status != 'active'">
									<text class="desc"></text>
								</view>
								<view class="discount-btn text-[#fb3f15] iconfont iconUnion" v-else>
									<!-- <text class="icon iconfont iconqiang"></text> -->

									<text class="icon iconfont bold ">团</text>

									<text class="arrow iconxiayibu iconfont"></text>
								</view>
							</view>
						</view>
					</view>
				</block>
				<mescroll-empty v-if="!list.length && !loading" :option="{ tip: '暂无商品，请看看其他商品吧！' }"></mescroll-empty>
			</view>
		</mescroll-body>

		<view v-if="!discountList.length && !loading" class="h-[calc(100vh-550rpx)]"
			:style="{ 'padding-top': mescrollTop }">
			<mescroll-empty :option="{ tip: '暂无商品，请看看其他商品吧！', 'btnText': '去逛逛' }"
				@emptyclick="redirect({ url: '/addon/shop/pages/goods/list' })"></mescroll-empty>
		</view>
		<loading-page :loading="bannerListLoading"></loading-page>
	</view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useLogin } from '@/hooks/useLogin'
import { img, redirect, getToken, currRoute, diyRedirect, pxToRpx } from '@/utils/common';
import { getActiveDiscountConfig, getActiveDiscountList, getActiveDiscountGoodsList } from '@/addon/shop/api/discount'
import { getActiveCombinationActivityGoodsList } from '@/addon/shop/api/combination'
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
import useMescroll from '@/components/mescroll/hooks/useMescroll.js'
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { topTabar } from '@/utils/topTabbar'
import { useGoods } from '@/addon/shop/hooks/useGoods'
import { fen2yuan } from '@/utils/formatting';

let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
const diyGoods = useGoods();
const headStyle = computed(() => {
	let style = Object.keys(menuButtonInfo).length ? (pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) + 368) + 'rpx' : '490rpx'
	return style
})

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
const bannerList: any = ref<Array<Object>>([])
const discountList = ref<Array<Object>>([])
const active = ref<number>(0)
const active_name = ref<String>('')
const list = ref<Array<Object>>([]);
const loading = ref<boolean>(true);
const bannerListLoading = ref<boolean>(true);

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({ title: '拼团活动' })
/********* 自定义头部 - end ***********/

const imgList: any = ref([])

const getActiveDiscountConfigFn = () => {
	bannerListLoading.value = false
	// bannerListLoading.value = true
	// getActiveDiscountConfig().then((res: any) => {
	// 	bannerList.value = res.data
	// 	imgList.value = bannerList.value.map((el: any) => img(el.imageUrl))
	// 	bannerListLoading.value = false
	// }).catch(() => {
	// 	bannerListLoading.value = false
	// })
}

getActiveDiscountConfigFn()
const getActiveDiscountListFn = () => {
	// getActiveDiscountList({}).then((res: any) => {
	// 	discountList.value = res.data
	// 	calculateHeight();
	// 	if (discountList.value && discountList.value.length) {
	// 		navClick(res.data[0]);
	// 	} else {
	// 		loading.value = false
	// 	}
	// })
	setTimeout(() => {
		discountList.value = [{
			"active_id": 1,
			"site_id": 10000,
			"active_name": "拼团活动",
			"active_desc": "精品推荐",
			"active_type": "goods",
			"active_goods_type": "single",
			"active_class": "discount",
			"active_class_category": "discount",
			"relate_member": "",
			"active_value": null,
			"start_time": "2025-01-02 18:21:04",
			"end_time": "2025-02-01 18:21:04",
			"active_status": "active",
			"create_time": "2025-01-02 18:21:22",
			"update_time": "2025-01-03 15:07:03",
			"active_order_money": 0,
			"active_order_num": 0,
			"active_member_num": 0,
			"active_success_num": 0,
			"active_type_name": "商品活动",
			"active_goods_type_name": "单品",
			"active_status_name": "进行中"
		}]
		calculateHeight();
		if (discountList.value && discountList.value.length) {
			navClick(discountList.value[0]);
		} else {
			loading.value = false
		}
	}, 100);

}
getActiveDiscountListFn()
const navClick = (item: any) => {
	active.value = item.active_id
	active_name.value = item.active_status_name
	getMescroll()?.resetUpScroll();
	uni.pageScrollTo({
		scrollTop: 0, //距离页面顶部的距离
		duration: 1
	});
}
const getActiveCombinationActivityGoodsListFn = (mescroll: any) => {
	if (discountList.value.length == 0) return;

	loading.value = true;
	let data: object = {
		pageNo: mescroll.num,
		pageSize: mescroll.size,
		// active_id: active.value
	};

	getActiveCombinationActivityGoodsList(data).then((res: any) => {
		let newArr = (res.data.list as Array<Object>).map((el: any) => {
			return el
		})
		//设置列表数据
		if (mescroll.num == 1) {
			list.value = []; //如果是第一页需手动制空列表
		}
		list.value = list.value.concat(newArr);
		list.value.forEach(ele => {

			ele.active_goods_status = 'active'
		})
		mescroll.endSuccess(newArr.length);
		loading.value = false;
	}).catch(() => {
		loading.value = false;
		mescroll.endErr(); // 请求失败, 结束加载
	})
}
const toRedirect = (index: any) => {
	let data = bannerList.value[index].toLink
	if (Object.keys(data).length) {
		if (!data.name) return;
		if (currRoute() == 'app/pages/member/index' && !getToken()) {
			useLogin().setLoginBack({ url: data.url })
			return;
		}
		diyRedirect(data);
	}
}

const toLink = (item: any) => {
	if (item.active_goods_status != 'active') {
		uni.showToast({ title: `活动${item.name}`, icon: 'none' })
		return;
	}

	redirect({
		url: '/addon/shop/pages/goods/groupon',
		param: {
			activity_id: item.id,
			type: 'combination_activity'
		}
	})
}

const mescrollTop = ref('')
const calculateHeight = () => {
	mescrollTop.value = Object.keys(menuButtonInfo).length ? (pxToRpx(Number(menuButtonInfo.height)) + pxToRpx(menuButtonInfo.top) + pxToRpx(8) + 368) + (discountList.value.length ? 70 : 0) + 'rpx' : (discountList.value.length ? '560rpx' : '490rpx')
}
</script>

<style lang="scss" scoped>
@import '@/addon/shop/styles/common.scss';

.swiper.ns-indicator-dots :deep(.uni-swiper-dots-horizontal) {
	bottom: 40rpx
}

.swiper.ns-indicator-dots :deep(.uni-swiper-dot) {
	background-color: #fff;
	opacity: 0.5;
}

.swiper.ns-indicator-dots :deep(.uni-swiper-dot-active) {
	background-color: #fff;
	opacity: 1;
}

.active {
	padding: 0 14rpx;
	line-height: 34rpx;
	border-radius: 29rpx;
	background: linear-gradient(94deg, #FB7939 0%, #FE120E 99%), #EF000C;
}

.active-button {
	background-size: cover;
	background-repeat: no-repeat;
}

:deep(.u-swiper-indicator__wrapper--line__bar) {
	height: 5rpx !important;
}

:deep(.u-swiper-indicator__wrapper--line) {
	height: 5rpx !important;
}

.discount-btn {
	font-size: 88rpx;
	margin-left: auto;
	position: absolute;
	right: -2rpx;
	display: flex;
	line-height: 1;

	.icon {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 40rpx;
		color: #fff;
		font-size: 44rpx;
	}

	.arrow {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;
		right: 18rpx;
		font-size: 16rpx;
	}

	.desc {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 34rpx;
		color: #fff;
		font-size: 26rpx;
	}
}
</style>